<template>
  <a-modal
    v-model:visible="testValue1"
    title="接口测试"
    :width="1000"
    :confirm-loading="confirmLoading"
    ok-text="确定"
    cancel-text="取消"
    @ok="props.dialogStatue === 'add' ? handleOk() : handleEditOk()"
    @Cancel="props.dialogStatue === 'add' ? handleCancel() : handleEditCancel()"
  >
    <div class="content">
      <div class="left">
        <a-form name="basic" :label-col="{ span: 3 }" :wrapper-col="{ span: 22 }" autocomplete="off">
          <a-form-item label="接口名称" name="codepeizhi"> api1 </a-form-item>
          <!-- 输入参数表格------------------------------1----------------------------1--------1--------------- -->
          <a-form-item label="" :wrapper-col="{ span: 23 }" name="codepeizhi">
            <p> <span readonly>RuquestURL</span><span>https://api.shudahid.com/api/magnge</span> </p>
            <p> <span readonly>请求方式</span><span>POST</span> </p>
          </a-form-item>
          <a-form-item label="输入参数" name="codepeizhi"> </a-form-item>
          <!-- 请求Body表格------------------------------2----------------------------2--------2-------------- -->

          <a-form-item label="" :wrapper-col="{ span: 23 }" name="codepeizhi">
            <a-table bordered :data-source="dataSource2" :columns="columns2" :pagination="false">
              <template #bodyCell="{ column, text }">
                <template v-if="column.dataIndex !== 'testValue'">
                  {{ text }}
                </template>
                <template v-else>
                  <a-input></a-input>
                </template>
              </template>
            </a-table>
          </a-form-item>
          <a-form-item label="请求Body" name="codepeizhi"> </a-form-item>
          <!-- 返回参数表格------------------------------3----------------------------3-------3--------------- -->
          <a-form-item label="" :wrapper-col="{ span: 23 }" name="codepeizhi">
            <a-table bordered :data-source="dataSource3" :columns="columns3" :pagination="false">
              <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex !== 'testValue'">
                  {{ text }}
                </template>
                <template v-else>
                  <template v-if="record.dataType == 'Object'"> </template>
                  <template v-else>
                    <a-input></a-input>
                  </template>
                </template>
              </template>
            </a-table>
          </a-form-item>
        </a-form>
        <a-button class="testbtn">测试</a-button>
      </div>
      <div class="right">
        <p>返回结果(JSON)</p>
        <div class="right_bottom"> </div>
      </div>
    </div>
  </a-modal>
</template>
<script setup lang="ts">
  import { Ref, UnwrapRef } from 'vue';
  const emit = defineEmits(['testShow', 'editSuccessed']);
  const props = defineProps({
    dataList: {
      type: String,
      default: () => {
        return [];
      },
    },
    testValue: {
      type: Boolean,
      default: false,
    },
    dialogStatue: {
      type: String,
    },
    isSaved: {
      type: Boolean,
    },
  });
  watch(
    () => props.testValue,
    (nvalue: boolean) => {
      testValue1.value = nvalue;
    },
  );
  interface SmallModal {
    codesId: string;
    configsId: number;
    configsMsg: string;
    configsName: string;
  }
  const tableSmallModal: Ref<SmallModal[]> = ref([]);

  const confirmLoading = ref<boolean>(false);
  const testValue1: Ref<boolean> = ref(false);
  const handleOk = () => {
    confirmLoading.value = true;
    setTimeout(() => {
      emit('testShow', 'false');
      testValue1.value = false;
      confirmLoading.value = false;
    }, 1000);
  };

  const handleEditOk = () => {
    confirmLoading.value = true;
    // let datas = {
    //   codesId: formState.codesId,
    //   codesMsg: formState.codesMsg,
    //   codesName: formState.codesName,
    //   configsList: [
    //     {
    //       configsValue: '121',
    //       codesId: 'MZB00012',
    //       configsName: '企daddfg大',
    //       configsMsg: '哈哈哈哈f发发发',
    //     },
    //   ],
    // };

    setTimeout(() => {
      emit('testShow', 'false');
      testValue1.value = false;
      confirmLoading.value = false;
    }, 1000);
  };
  //调用新增弹窗的关闭按钮方法
  const handleCancel = () => {
    emit('testShow', 'false');
  };
  //调用编辑弹窗的关闭按钮方法
  const handleEditCancel = () => {
    emit('testShow', 'false');
  };

  //   三个表格的数据开始-----------------

  interface DataItem1 {
    key: string;
    paramName: string;
    paramAddress: string;
    isNull: number;
    dataType: string;
    default: string;
    paramDescribe: string;
    children?: DataItem1[];
  }

  const columns2 = [
    {
      title: '参数名称',
      dataIndex: 'paramName',
      width: '20%',
    },
    {
      title: '数据类型',
      dataIndex: 'dataType',
      width: '12%',
    },
    {
      title: '参数位置',
      dataIndex: 'paramAddress',
      width: '12%',
    },
    {
      title: '是否必填',
      dataIndex: 'isNull',
      width: '12%',
    },
    {
      title: '测试值',
      dataIndex: 'testValue',
      width: '12%',
    },
  ];
  const columns3 = [
    {
      title: '参数名称',
      dataIndex: 'paramName',
      width: '30%',
    },
    {
      title: '数据类型',
      dataIndex: 'dataType',
      width: '12%',
    },
    {
      title: '是否必填',
      dataIndex: 'isNull',
      width: '12%',
    },
    {
      title: '测试值',
      dataIndex: 'testValue',
      width: '12%',
    },
  ];
  const editableData1: UnwrapRef<Record<string, DataItem1>> = reactive({});
  const editableData2: UnwrapRef<Record<string, DataItem1>> = reactive({});
  const editableData3: UnwrapRef<Record<string, DataItem1>> = reactive({});
  let dataSource1: Ref<DataItem1[]> = ref([]);
  let dataSource2: Ref<DataItem1[]> = ref([]);
  let dataSource3: Ref<DataItem1[]> = ref([]);
  dataSource1.value = [
    {
      key: '0',
      paramName: '',
      paramAddress: 'string',
      isNull: 1,
      dataType: 'String',
      default: 'string',
      paramDescribe: 'string',
    },
    {
      key: '1',
      paramName: 'ddd',
      paramAddress: 'string',
      isNull: 1,
      dataType: 'Int',
      default: 'string',
      paramDescribe: 'string',
    },
    {
      key: '2',
      paramName: 'dffdd',
      paramAddress: 'string',
      isNull: 1,
      dataType: 'Object',
      default: 'string',
      paramDescribe: 'string',
    },
  ];
  dataSource2.value = [
    {
      key: '1',
      paramName: 'data1',
      paramAddress: 'string',
      isNull: 1,
      dataType: 'String',
      default: 'string',
      paramDescribe: 'string',
      children: [{ key: '11', paramName: 'name', paramAddress: 'string', isNull: 1, dataType: 'String', default: 'string', paramDescribe: 'string' }],
    },
    {
      key: '2',
      paramName: 'ddd',
      paramAddress: 'string',
      isNull: 1,
      dataType: 'Int',
      default: 'string',
      paramDescribe: 'string',
    },
    {
      key: '3',
      paramName: 'dffdd',
      paramAddress: 'string',
      isNull: 1,
      dataType: 'Object',
      default: 'string',
      paramDescribe: 'string',
    },
  ];
  dataSource3.value = [
    {
      key: '0',
      paramName: '',
      paramAddress: 'string',
      isNull: 1,
      dataType: 'String',
      default: 'string',
      paramDescribe: 'string',
    },
    {
      key: '1',
      paramName: 'ddd',
      paramAddress: 'string',
      isNull: 1,
      dataType: 'Int',
      default: 'string',
      paramDescribe: 'string',
    },
    {
      key: '2',
      paramName: 'dffdd',
      paramAddress: 'string',
      isNull: 1,
      dataType: 'Object',
      default: 'string',
      paramDescribe: 'string',
    },
  ];
  let URL = 'https://api.shuyixin.com/api/mage';
  //   三个表格的数据结束
</script>
<style lang="less" scoped>
  .content {
    display: flex;
    width: 100%;
    flex-direction: row;

    .left {
      flex: 2;

      .ant-form {
        .ant-form-item:nth-child(2) {
          p {
            display: flex;
            height: 40px;
            flex-direction: row;
            // align-items: center;
            span {
              border: 1px solid rgb(179, 179, 179);
              text-align: center;
              line-height: 40px;
            }

            span:nth-child(1) {
              flex: 1;
              border-right: none;
            }

            span:nth-child(2) {
              flex: 3;
            }
          }

          p:nth-child(2) {
            position: relative;
            bottom: 15px;
          }
        }
      }

      .testbtn {
        margin-left: 150px;
        color: aliceblue;
        background-color: rgb(23, 181, 52);
      }
    }

    .right {
      flex: 1;
      display: flex;
      flex-direction: column;

      p {
        flex: 1;
      }

      .right_bottom {
        flex: 20;
        background-color: black;
      }
    }
  }
</style>
